<template>
  <div class="content">
    <div class="left-bottom">
      <div class="title">关联设备</div>
      <div class="container">
        <div><span>所属设备：</span>{{ detail.parentProductName }}</div>
        <div>
          <span>所属设备编码：</span>{{ detail.parentDeviceCode }}
          <el-tooltip
            class="more"
            effect="dark"
            content="设备详情"
            placement="top"
          >
            <i class="iconfont gengduo1" @click="doorLogClick"></i>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqOrgSuperLevelInfo } from "@/api/api";
import { mapState } from "vuex";

export default {
  props: ["detail"],
  components: {},
  data() {
    return {
      orgSupInfo: {},
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {},
  methods: {
    // 跳转至详情
    // doorLogClick(){
    //   // this.$parent.getpauseAudio()   // 停止铃声
    //   this.$emit('getpauseAudio')// 停止铃声
    //   // console.log(this.detail);
    //   this.detail.id=this.detail.parentId
    //   this.detail.imei=this.detail.parentDeviceCode
    //   this.$store.commit("saveDeviceInfo", this.detail); //保存信息，使页面刷新信息还存在
    //   this.$router.push("/device/host");
    // },
    doorLogClick() {
      // this.$parent.getpauseAudio()   // 停止铃声
      this.$emit("getpauseAudio"); // 停止铃声
      // console.log(this.detail);
      const { detail } = this;
      const data = {
        id: detail.parentId,
        productName: detail.parentProductName,
        deviceType: detail.parentDeviceType,
        classMark: detail.parentClassMark,
        deviceId: detail.parentDeviceId,
        imei: detail.parentDeviceCode,
        imsi: detail.parentImsi,
        isAlarm: detail.parentIsAlarm,
        lastTime: detail.parentLastTime,
        spaceName: detail.parentSpaceName,
        spaceId: detail.parentSpaceId,
        iccid: detail.parentIccid,
        offlineTime: detail.parentOfflineTime,
        online: detail.parentOnline,
        onlineTime: detail.parentOnlineTime,
        activeRegister: detail.parentActiveRegister,

        orgId: detail.orgId,
      };
      this.$store.commit("saveDeviceInfo", data); //保存信息，使页面刷新信息还存在
      this.$router.push("/device/host");
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    .height(43);
    width: 100%;
    margin: 0 auto;
    .fontSize(16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../../../../assets/images/datavPop/head.png") no-repeat;
    background-size: 100% 100%;
    font-weight: 600;

    i {
      .fontSize(20);
      color: #fff;
    }
  }

  .left-bottom {
    height: 100%;
    // background: rgba(13, 24, 86, 1);
    box-shadow: inset -9px 3px 20px 0px #032b60, inset 9px -3px 20px 0px #032e68;
  }
}

.container {
  height: 67%;
  overflow-y: auto;
  padding-left: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 0.8vw;

  > div {
    // margin-bottom: 10px;
    > span:first-of-type {
      color: #8299c9;
    }
  }
}
.gengduo1 {
  margin-left: 2px;
  font-size: 18px;
  cursor: pointer;
  color: #09e8fc;
}
</style>
